<template>
  <div class="home">
    <SlickList
      lockAxis="x"
      v-model="slickItemArr"
      axis="x"
      @input="getIndexArr"
      class="mb-3"
    >
      <div class="row">
        <SlickItem
          v-for="(item, index) in slickItemArr"
          :key="index"
          :index="index"
          class="col"
        >
          <el-card shadow="hover">
            <div class="d-flex align-items-center">
              <i
                :class="[item.icon, item.iconBgcolorClass]"
                class="border h2 mb-0 bg-primary text-white card-item text-center rounded-circle"
              ></i>
              <div class="ml-2">
                <h5 class="mb-0">{{ item.num }}</h5>
                <small class="text-muted mb-0">{{ item.small }}</small>
              </div>
            </div>
          </el-card>
        </SlickItem>
      </div>
    </SlickList>
    <!-- 卡片堆砌 -->

    <SlickList v-model="cardArr" lockAxis="x" axis="x">
      <div class="row">
        <SlickItem
          v-for="(cardItem, index) in cardArr"
          :key="cardItem.rowId"
          :index="index"
          class="col-6"
        >
          <SlickList v-model="cardItem.colArr" lockAxis="y" axis="y">
            <SlickItem
              v-for="(cardItemSubmenu, indexto2) in cardItem.colArr"
              :key="cardItemSubmenu.colId"
              :index="indexto2"
            >
              <template v-if="cardItem.colArr.lenght !== 0">
                <el-card shadow="hover" class="mb-2">
                  <homeCard
                    :cardType="cardItemSubmenu.components_type"
                    :slotcenter="{
                      title: cardItemSubmenu.title,
                      small: cardItemSubmenu.small,
                    }"
                  >
                    <!-- <template v-slot:title>{{
                      cardItemSubmenu.title
                    }}</template>
                    <template v-slot:small>{{
                      cardItemSubmenu.small
                    }}</template> -->
                  </homeCard>
                </el-card>
              </template>
            </SlickItem>
          </SlickList>
        </SlickItem>
      </div>
    </SlickList>
    <div class="alert alert-warning" role="alert" v-if="cardArr.length === 0">
      <i class="el-icon-warning h4 mb-0 mr-2 align-top"></i>当前无数据
    </div>
  </div>
</template>

<script>
// 拖拽组件
import { SlickList, SlickItem } from 'vue-slicksort'
// 卡片组件
import homeCard from '@/components/homeCarrd/homeCard'
export default {
  components: {
    SlickList,
    SlickItem,
    homeCard,
  },
  data() {
    return {
      slickItemArr: [
        {
          iconBgcolorClass: 'bg-primary',
          icon: 'el-icon-user-solid',
          num: '30',
          small: '关注人数（个）',
        },
        {
          iconBgcolorClass: 'bg-success',
          icon: 'el-icon-s-finance',
          num: '158',
          small: '订单总数（笔）',
        },
        {
          iconBgcolorClass: 'bg-danger',
          icon: 'el-icon-s-goods',
          num: '30000',
          small: '订单总额（元）',
        },
        {
          iconBgcolorClass: 'bg-warning',
          icon: 'el-icon-s-data',
          num: '578',
          small: '本月销量（笔）',
        },
      ],
      cardArr: [
        {
          rowId: '1',
          colArr: [
            {
              title: '交易提示',
              small: '需要立即处理的交易',
              components_type: 'transaction-tips',
              rowId: '1-1',
            },
            {
              title: '店铺及商品提示',
              small: '需要关注的店铺信息及待处理事项',
              components_type: 'warehouse-tips',
              rowId: '1-2',
            },
            {
              title: '销售情况统计',
              small: '按周期统计商家店铺的定单量和定单金额',
              components_type: 'statistics',
              rowId: '1-2',
            },
          ],
        },
        {
          rowId: '2',
          colArr: [
            {
              title: '单品销售排行',
              small: '查看更多',
              components_type: 'table',
              colId: '2-1',
            },
            {
              title: '统计图',
              small: '查看更多数据',
              components_type: 'echarts',
              colId: '2-2',
            },
          ],
        },
      ],
    }
  },
  methods: {
    // 获取重新排序的数据
    getIndexArr(arr) {
      this.slickItemArr = arr
    },
  },
}
</script>

<style lang="scss" scoped>
.card-item {
  width: 45px;
  height: 45px;
  line-height: 45px;
}
</style>
